<template>
    <a-row style="height: 550px">
        <a-col :span="4">
            <!--一级分类列表-->
            <a-list :split="false" size="small" :data-source="treeData"
                    style="display:inline-block;height: 100%;;font-size:14px;">
                <a-list-item class="cate-item"
                             style="font-size: 14px;margin: 0;line-height:25px;height: 27px"
                             slot="renderItem"
                             slot-scope="cate1, index">
                                <span :id="cate1.id" @mousedown="showCate2(cate1,true,$event)"
                                >
                                    {{cate1.name}}
                                </span>
                </a-list-item>
            </a-list>
        </a-col>
        <a-col :span="20">
            <!--二级分类和三级分类卡片-->
            <a-card class="cate23Card" v-if="cate2Visible">
                <a-row v-for="cate2 in cate2Data" :key="cate2.id" style="margin:0 10px 10px 10px">
                    <!--二级分类-->
                    <a-col :span="3">
                        <span class="cate-item cate2-item">{{cate2.name}}  ></span>
                    </a-col>
                    <!--三级分类-->
                    <a-col :span="21">
                        <a type="link" class="cate3-item" style="margin:0px 10px 10px 5px;"
                           @click="selectCate3(cate2,cate3)"
                           v-for="cate3 in cate2.children">{{cate3.name}}
                        </a>

                    </a-col>
                </a-row>

            </a-card>
        </a-col>
    </a-row>
</template>

<script>
    import cateApi from "../../api/cateApi";

    export default {
        name: "cate",

        data() {
            return {
                treeData: [],
                cate2Data: [],
                cate2Visible: false,
                selectedCate: [],
                acticeClass:''
            }
        },
        created() {
            this.fetCateTree()
        },
        methods: {
            fetCateTree() {
                cateApi.categoryTree().then(resp => {
                    let respData = resp.data;
                    if (respData.flag) {

                        // this.addSlot(respData.data)
                        this.treeData = respData.data
                    }
                })
            },
            /**
             * 打开二级分级
             */
            showCate2(data, show, e) {
                //阻止冒泡到最外层的card
                if (e && e.preventDefault()) {
                }
                if (data && data.children) {
                    this.cate2Data = data.children
                }
                this.cate2Visible = show;
                this.selectedCate=[]
                let cate={
                    id:data.id,
                    name:data.name
                }
                this.selectedCate[0] = cate
                this.$emit("refreshSelectedCates",this.selectedCate)


            },
            selectCate3(cate2, cate3) {
                let cate2Data={
                    id:cate2.id,
                    name:cate2.name
                }
                let cate3Data={
                    id:cate3.id,
                    name:cate3.name
                }
                this.selectedCate[1] = cate2Data
                this.selectedCate[2] =cate3Data
                this.$emit("refreshSelectedCates",this.selectedCate)

            },


        }
    }
</script>

<style scoped>
    .cate-item:hover {
        cursor: pointer;
        color: #ef601d;
    }

    .cate-item :active {
        color: #ef601d;
    }
    .cate3-item:hover {
        color: #ef601d;

    }

    .cate3-item {
        color: #666;
        font-size: 12px;
        height: 16px;

    }

    .cate23Card {
        float: top;
        width: 800px
    }

    .active{
        color: #ef601d;
    }
    .cate3-item :link{
        color: red;
    }

</style>